import React, { useEffect } from 'react';
import styles from "./desc.module.less"
import { Button, Collapse } from 'antd';
import { StarOutlined, SettingOutlined } from '@ant-design/icons';
import { reqOneProblem } from '../../../../api';

const { Panel } = Collapse;

export const Desc = (props) => {
    
    function callback(key) {
        console.log(key);
    }
    const text = `
        A dog is a type of domesticated animal.
        Known for its loyalty and faithfulness,
        it can be found as a welcome guest in many households across the world.
    `
    const problemLevelArr = ["简单", "中等", "困难"]
    useEffect(async ()=>{
        let { id } = props

        // let data = await reqOneProblem(id)
        // let { 
        //     commentNumber,
        //     problemBodyVo,
        //     problemLevel,
        //     title,
        //     solutionNumber,
        //     tags,
        //     acNumber,
        //     runMemory,
        //     caseNumber,
        //     category,
        //     submitNumber
        // } = data.data
        
    },[])

    return (
        <div className={styles.container} >
            <div className={styles.titleContainer}>
                <span ><a href="/problems/1">1. 两数之和</a></span>
                <div className={styles.tagContainer}>
                    <span >难度</span>
                    <span style={{ color: "green" }}>简单</span>
                    <Button type="link" icon={<StarOutlined />}>12893</Button>
                    <Button type="link" icon={<StarOutlined />}>收藏</Button>
                    <Button type="link" icon={<StarOutlined />}>分享</Button>
                    <Button type="link" icon={<StarOutlined />}>切换为英文</Button>
                    <Button type="link" icon={<StarOutlined />}>接受动态</Button>
                    <Button type="link" icon={<StarOutlined />}>反馈</Button>
                </div>
            </div>
            <div className={styles.problemDesc}>
                <p>给定一个整数数组 <code>nums</code>&nbsp;和一个整数目标值 <code>target</code>，请你在该数组中找出 <strong>和为目标值 </strong><em><code>target</code></em>&nbsp; 的那&nbsp;<strong>两个</strong>&nbsp;整数，并返回它们的数组下标。</p>
                <p>你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。</p>
                <p>你可以按任意顺序返回答案。</p>
                <p>&nbsp;</p>
                <p><strong>示例 1：</strong></p>
                <pre className={styles.codeTest}>
                    <strong>输入：</strong>nums = [2,7,11,15], target = 9 <br />
                    <strong>输出：</strong>[0,1]<br />
                    <strong>解释：</strong>因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。<br />
                </pre>
                <p><strong>示例 1：</strong></p>
                <pre className={styles.codeTest}>
                    <strong>输入：</strong>nums = [2,7,11,15], target = 9<br />
                    <strong>输出：</strong>[0,1]<br />
                    <strong>解释：</strong>因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。<br />
                </pre>
                <p><strong>示例 1：</strong></p>
                <pre className={styles.codeTest}>
                    <strong>输入：</strong>nums = [2,7,11,15], target = 9<br />
                    <strong>输出：</strong>[0,1]<br />
                    <strong>解释：</strong>因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。<br />
                </pre>
                <p><strong>提示：</strong></p>
                <ul>
                    <li><code>2 &lt;= nums.length &lt;= 10<sup>4</sup></code></li>
                    <li><code>-10<sup>9</sup> &lt;= nums[i] &lt;= 10<sup>9</sup></code></li>
                    <li><code>-10<sup>9</sup> &lt;= target &lt;= 10<sup>9</sup></code></li>
                    <li><strong>只会存在一个有效答案</strong></li>
                </ul>
                <p><strong>进阶：</strong>你可以想出一个时间复杂度小于 <code>O(n<sup>2</sup>)</code> 的算法吗？</p>
            </div>
            <div className={styles.problemCount} >
                <span>通过次数</span>
                <span>2,780,691</span>
                <div className={styles.diver}>|</div>
                <span >提交次数</span>
                <span>5,325,911</span>
            </div>
            <div className={styles.apprance}>
                <div >请问您在哪类招聘中遇到此题？</div>
                <Button>社招</Button>
                <Button>校招</Button>
                <Button>实习</Button>
                <Button>未遇到</Button>
            </div>
            <div>
                <Collapse
                    onChange={callback}
                    expandIconPosition="right"
                    ghost
                    className={styles.collapse} 
                >
                    <Panel header="贡献" key="1" className={styles.collapsePanel} >
                        <div>{text}</div>
                    </Panel>
                    <Panel header="相关企业" key="2" className={styles.collapsePanel} >
                        <div>{text}</div>
                    </Panel>
                    <Panel header="相关标签" key="3" className={styles.collapsePanel} >
                        <div>{text}</div>
                    </Panel>
                    <Panel header="相似题目" key="4" className={styles.collapsePanel} >
                        <div>{text}</div>
                    </Panel>
                </Collapse>
            </div>
        </div>
    )
}